<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf基本语法</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script>
        $(function(){
            $("#delete").click(function(){
               let id = $(this).attr("data-id");
               console.log("id:"+id);
            });
        });
    </script>
</head>
<body>
<!--
    在Thymeleaf中没有四大作用域的概念
    但是对于人员而言,四大作用域已经成为了一种习惯
    模板引擎中,对于request、session、application作用域均做了处理
    三种作用域访问方式不同
-->
<h2>访问request作用域</h2>
<!--
    有以下四种方式用于访问作用域
    1.直接输出,不识别标签,相当于jquery中的text()
        语法:[[${key}]]
    2.直接输出,识别标签,相当于jquery中的html()
        语法:[(${key})]
    3.作为标签的属性使用,不识别标签
        语法:th:text="${key}"
    4.作为标签的属性使用,识别标签
        语法:th:utext="${key}"
-->
[[${msg}]]
[(${msg})]
<span th:text="${msg}"></span>
<span th:utext="${msg}"></span>
<h2>访问session与application作用域</h2>
<!--
   对于session与application作用域
   使用时语法与request作用域基本一致
   只是在表达式内容中获取作用域值的时候使用作用域.key的方式进行获取
   如果是session作用域,表达式内容为:session.key
   如果是application作用域,表达式内容为:application.key
-->
session:<span th:text="${session.user.username}"></span><br>
<hr>
application:<span th:text="${application.user2.username}"></span>
<h2>属性赋值</h2>
<!--
    当遇到为某一个属性赋值时,其值是作用域的数据
    不能直接使用属性名="${key}"的方式
    必须使用 th:属性名="${key}"
-->
<a id="delete" href="javascript:;" th:data-id="${id}">删除</a>
<h2>if判断</h2>
<!--
    if判断:类似于JSTL中的if标签
        每一个if判断均是独立存在的
        当判断条件满足则执行对应标签体的内容
-->
<span th:if="${age < 5}">婴儿</span>
<span th:if="${age < 18}">少年</span>
<span th:if="${age < 30}">青年</span>
<span th:if="${age < 60}">中年</span>
<span th:if="${age >= 60}">老年</span>
<hr>
<h2>unless判断</h2>
<!--
    unless判断与if不共戴天,有你没我
        unless判断只有当判断条件不满足时,才会执行标签体内容
-->
<span th:unless="${age < 5}">婴儿</span>
<span th:unless="${age < 18}">少年</span>
<span th:unless="${age < 30}">青年</span>
<span th:unless="${age < 60}">中年</span>
<span th:unless="${age >= 60}">老年</span>
<h2>switch判断</h2>
<!--
    switch判断与Java的switch基本一致
    通过子标签case判断值,满足则执行对应标签体且跳出整个switch语句
    如果case条件不满足,则不执行当前标签体,执行下一个case语句
    此处可以使用*号表示匹配一切,相当于otherwise的用法
-->
<span th:switch="${role}">
    <span th:case="student">学生</span>
    <span th:case="user">用户</span>
    <span th:case="emp">员工</span>
    <span th:case="teacher">老师</span>
    <!--<span th:case="programmer">程序员</span>-->
    <span th:case="businessman">商人</span>
    <span th:case="*">其他</span>
</span>
<hr>
<h2>遍历操作</h2>
<table border="1">
    <tr>
        <th>行号</th>
        <th>编号</th>
        <th>用户名</th>
        <th>密码</th>
        <th>电话</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    <!--
        对谁便利,就在对应的标签中使用th:each的属性
        其值的格式为  var[,varStatus]:items
            var:当前迭代的元素别名
            items:需要遍历的集合
            varStatus:遍历的状态
                可以通过状态中的index属性获取索引号
    -->
    <!--<tr th:each="user:${users}">-->
    <tr th:each="user,i:${users}">
        <td>[[${i.index + 1}]]</td>
        <td>[[${user.id}]]</td>
        <td th:text="${user.username}"></td>
        <td th:text="${user.password}"></td>
        <td th:text="${user.phone}"></td>
        <td th:text="${user.address}"></td>
        <td>
            <a href="#showModify">修改</a>
        </td>
    </tr>
</table>

<hr>
<h2 id="showModify">设置默认值</h2>
<form action="">
    编号:<input type="text" th:value="${user.id}" readonly><br>
    用户名:<input type="text" th:value="${user.username}"><br>
    密码:<input type="password" th:value="${user.password}"><br>
    电话:<input type="text" th:value="${user.phone}"><br>
    地址:<input type="text" th:value="${user.address}"><br>
</form>
<hr>
<form action="">
    编号:<input type="text" th:field="${user.id}" readonly><br>
    用户名:<input type="text" th:field="${user.username}"><br>
    密码:<input type="password" th:field="${user.password}"><br>
    电话:<input type="text" th:field="${user.phone}"><br>
    地址:<input type="text" th:field="${user.address}"><br>
</form>
<hr>
<form action="" th:object="${user}">
    编号:<input type="text" th:field="*{id}" readonly><br>
    用户名:<input type="text" th:field="*{username}"><br>
    密码:<input type="password" th:field="*{password}"><br>
    电话:<input type="text" th:field="*{phone}"><br>
    地址:<input type="text" th:field="*{address}"><br>
</form>












<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>